<template>
	<div class="content-loading" :class="isShow ? 'show' : 'hide'">
		<div class="conent-loading-animate">
			<div></div><div></div><div></div>
		</div>
	</div>
</template>

<script>
import BaseWidget from '@/jimu/BaseWidget.js'
export default {
	name: 'LoadingWidget',
	mixins:[ BaseWidget ],
	data(){
		return {
			isShow: false
		}
	},
	created(){
		this.subscribe()
	},
	methods:{
		subscribe: function(){
			this.bus.$on("showLoading", (isShow) => {
				this.isShow = isShow
			})
		}
	}
}
</script>

<style lang="scss">
	@import 'common';

	@function delay($interval, $count, $index) {
    	@return ($index * $interval) - ($interval * $count);
	}

	@mixin ball-pulse-sync($n: 3, $start: 1) {
	    @for $i from $start through $n {
	        > div:nth-child(#{$i}) {
	            animation: ball-pulse-sync 0.6s delay(0.07s, $n, $i) infinite ease-in-out;
	        }
	    }
	}
	$amount: 10px;

	@keyframes ball-pulse-sync {
		33% {
			transform: translateY($amount);
		}
		66% {
			transform: translateY(-$amount);
		}
		100% {
			transform: translateY(0);
		}
	}
	@keyframes show{
		0%{
			opacity: 0;
		}
		100%{
			opacity: 1;
		}
				
	}
	@keyframes hide{
		0%{
			opacity: 1;
		}
		100%{
			opacity: 0;
		}
				
	}
			
	.content-loading {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1000;
		width: 100%;
		height: 100%;
		background: rgba(255,255,255,0.7);
		display: none;
		&.show{
			display: block;
			animation: show .5s;
		}
		&.hide{
			display: none;
			animation: show .5s;
		}
    		
		.conent-loading-animate {
			width: 200px;
			height: 200px;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -120px;
			margin-left: -100px;
			text-align: center;
			line-height: 200px;

			@include ball-pulse-sync();
			> div {
				width: 15px;
				height: 15px;
				background-color: $primary;
				border-radius: 100%;
				margin: 5px;
				display: inline-block;
			}
		}
	}
</style>